<template>
    <view class="work-detail">
      
        
        <!-- 主内容区域 -->
        <scroll-view scroll-y class="content-scroll">
            <!-- 主图区域 -->
            <view class="main-image-container">
                <image 
                    v-if="detail.images"
                    :src="`http://localhost:8080/download/${detail.images.split(',')[0]}`" 
                    mode="widthFix" 
                    class="main-image"
                    @click="previewImage(0)"
                ></image>
            </view>
            
            <!-- 基本信息区域 -->
            <view class="info-section">
                <text class="title">{{detail.title}}</text>
                <text class="desc">{{detail.desc}}</text>
            </view>

            <!-- 作品详情区域 -->
            <view class="detail-section">
                <view class="section-header">
                    <text class="section-title">作品详情</text>
                    <text class="section-subtitle">WORKS DETAILS</text>
                </view>
                
                <!-- 详情图片列表 -->
                <view class="detail-images">
                    <image 
                        v-for="(img, index) in detail.images ? detail.images.split(',') : []" 
                        :key="index"
                        :src="`http://localhost:8080/download/${img}`"
                        mode="widthFix"
                        class="detail-image"
                        @click="previewImage(index)"
                    ></image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import API from '@/api/config.js'

export default {
    data() {
        return {
            id: '',
            detail: {},
            currentIndex: 0
        }
    },
    
    methods: {
        goBack() {
            uni.navigateBack();
        },
        
        // 预览图片
        previewImage(index) {
            if (!this.detail.images) return;
            
            const imageArray = this.detail.images.split(',');
            const urls = imageArray.map(img => `http://localhost:8080/download/${img}`);
            
            uni.previewImage({
                current: urls[index],
                urls: urls,
                fail: (err) => {
                    console.error('预览图片失败:', err);
                }
            });
        },
        
        // 加载详情
        async loadDetail() {
            try {
                uni.showLoading({ title: '加载中...' });
                const res = await uni.request({
                    url: `${API.WORKS_GET}${this.id}`,
                    method: 'GET'
                });
                
                if (res.data.code === 200) {
                    this.detail = res.data.data;
                }
            } catch (error) {
                console.error('加载详情失败:', error);
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                });
            } finally {
                uni.hideLoading();
            }
        }
    },
    
    onLoad(options) {
        if (options.id) {
            this.id = options.id;
            this.loadDetail();
        }
    }
}
</script>

<style scoped>
.work-detail {
    min-height: 100vh;
    background: #000;
}

.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    z-index: 100;
    border-bottom: 1rpx solid rgba(255,255,255,0.1);
}

.nav-back {
    font-size: 36rpx;
    color: #fff;
}

.nav-title {
    font-size: 32rpx;
    font-weight: 400;
    color: #fff;
}

.nav-score {
    font-size: 28rpx;
    color: #fff;
}

.content-scroll {
    padding-top: 88rpx;
}

.main-image-container {
    width: 100%;
    background: #111;
}

.main-image {
    width: 100%;
    display: block;
}

.info-section {
    padding: 40rpx 30rpx;
    background: #111;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.title {
    font-size: 36rpx;
    color: #fff;
    font-weight: 400;
    margin-bottom: 20rpx;
    display: block;
    letter-spacing: 1px;
}

.desc {
    font-size: 28rpx;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    letter-spacing: 0.5px;
}

.detail-section {
    padding: 40rpx 30rpx;
    background: #111;
}

.section-header {
    margin-bottom: 40rpx;
    border-left: 4rpx solid #fff;
    padding-left: 20rpx;
}

.section-title {
    font-size: 32rpx;
    color: #fff;
    font-weight: 400;
    display: block;
    letter-spacing: 1px;
}

.section-subtitle {
    font-size: 24rpx;
    color: rgba(255,255,255,0.5);
    margin-top: 8rpx;
    display: block;
    letter-spacing: 1px;
}

.detail-images {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
}

.detail-image {
    width: 100%;
    border-radius: 8rpx;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.3);
}

/* 添加图片悬停效果 */
.main-image:active,
.detail-image:active {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* 优化滚动条样式 */
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
</style> 